<template>
  <div>
     <div>
       <span>用户名:</span>  
       <!-- 1. v-model
       双向数据绑定
       :value属性 - vue变量
       -->
       <input type="text" v-model="username">
     </div>
     <div>
       <span>密码:</span>  
       <input type="text" v-model="password">
     </div>
     <div>
       <span>来自于:</span>  
       <select v-model="from">
           <option value="北京市">北京</option>
           <option value="上海市">上海</option>
           <option value="南京市">南京</option>
           <option value="西安市">西安</option>
       </select>
     </div>
     <div>
      <!-- checkbox特殊, 内部判断v-model是数组, 绑定value值, 非数组绑定checked属性 -->  
      <span>爱好</span>
      <input type="checkbox" v-model="hobby" value="吃饭" /><span>吃饭</span>  
      <input type="checkbox" v-model="hobby" value="逛街" /><span>逛街</span>
      <input type="checkbox" v-model="hobby" value="旅游" /><span>旅游</span>
      <input type="checkbox" v-model="hobby" value="打游戏" /><span>打游戏</span>
      <input type="checkbox" v-model="hobby" value="撩妹" /><span>撩妹</span>
      <input type="checkbox" v-model="hobby" value="唱歌" /><span>唱歌</span>
    </div>
     <div>
      <span>性别</span>
      <input type="radio" name="sex" v-model="sex" value="男" /><span>男</span>
      <input type="radio" name="sex" v-model="sex" value="女" /><span>女</span>
    </div>
     <div>
      <span>自我介绍</span>
      <textarea v-model="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            username:"死神降临",
            password:"1234567",
            from:"",
            hobby:[],
            sex:"男",
            intro:"世界之大，无奇不有"
        }
    }
    // 总结:
    // 特别注意: v-model, 在input[checkbox]的多选框状态
    // 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
    // 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
}
</script>

<style>

</style>